<template>
  <div class="m-contain login">
    <van-nav-bar title="注册"
                 left-arrow
                 @click-left="onClickLeft" />
    <div class="m-main">
      <div class="text-center margin-top-30 margin-bottom-10">
        <van-image width="106"
                   height="106"
                   :src="imgUrl" />
      </div>
      <!--  form -->
      <input-model class="input-model"
                   v-for="(item,index) in list"
                   :key="index"
                   :name="item.name"
                   :type="item.type"
                   :btnText="item.btnText?item.btnText:''" />
      <!-- 按钮 -->
      <van-button class="logbtn"
                  round
                  type="primary"
                  size="large">注册</van-button>
      <!--  -->
      <div class="text-center log">
        <router-link to='/login'>已有账号,立即登录</router-link>
      </div>

    </div>
  </div>
</template>
<script>

import Vue from 'vue';
import inputModel from './components/inputModel.vue'
import { NavBar, Image as VanImage, Button } from 'vant';


Vue.use(VanImage);
Vue.use(NavBar);
Vue.use(Button);
export default {
  name: "login",
  data() {
    return {
      imgUrl: require('@/assets/image/login/icon-login-logo.png'),
      list: [{ name: '手机号', type: 'tel', value: '', },
      { name: '验证码', type: 'soltBtn', value: '', btnText: '发送验证码' },
      { name: '密码', type: 'text', value: '', },
      { name: '确认密码', type: 'text', value: '', },
      { name: '邀请码', type: 'text', value: '', },
      ]
    }
  },
  components: {
    'input-model': inputModel
  },
  methods: {
    onClickLeft() {

    }
  }
}
</script>

<style lang="less" scoped>
.login {
  .input-model {
    margin-top: 1.5rem;
  }
  .van-button--primary {
    border: none;
    background-color: #e62b4b;
  }
  .logbtn {
    display: block;
    height: 2.8125rem;
    width: calc(100% - 40px);
    margin: 2.0625rem auto;
    line-height: 2.8125rem;
    font-size: 0.9375rem;
  }
  .log {
    margin-bottom: 30px;
    a {
      font-size: 0.9375rem;

      color: #e62b4b;
    }
  }
}
</style>